<template>
	<view class="login">
		<view class="avatorWrapper">
			<image class="img" src="../../static/icons/head.png" mode="widthFix"></image>
		</view>
		<view class="formStyle">
			<u-form class="form" ref="form" :model="formData" :rules="rules">
				<view class="inputWrapper">
					<u-form-item  prop="phone" label="用户手机" label-width=70 >
					<!-- 	<text class="user_info">用户手机</text> -->
						<u-input class="input" type="text" :border="false" v-model="formData.phone"  placeholder="请输入手机号" />
					</u-form-item>
					
				</view>
				<view class="inputWrapper">
				<u-form-item prop="password" label="用户密码" label-width=70 >
				<!-- 	<text class="user_info">用户密码</text> -->
					<u-input class="input" type="password" :border="false" v-model="formData.password"   placeholder="请输入密码" />
				</u-form-item>
				</view>
				<view class="inputWrapper">
				<u-form-item prop="repassword" label="确认密码" label-width=70 >
				<!-- 	<text class="user_info">用户密码</text> -->
					<u-input class="input" type="password" :border="false" v-model="formData.repassword"  placeholder="请输入密码" />
				</u-form-item>
				</view>
			</u-form>
		</view>
		<view class="btnStyle">
			<button class="Btn" @tap="submit">确认注册</button>
			<button class="Btn register" @tap="toLogin">已有账号</button>
		</view>
		

	</view>
</template>
<script>
	import {
		mapActions
	} from "vuex";
	export default {
		data() {
			return {
				formData: {
					phone: '',
					password: '',
					repassword: ''
				},
				rules: {
					// 对name字段进行必填验证
					phone: [{
							required: true,
							message: '请输入手机号',
							trigger: ['blur', 'change'],
						},
						{
							pattern: /^[1]([3-9])[0-9]{9}$/,
							message: '手机号不合法！',
							transform(value) {
								return String(value);
							},

							trigger: ['blur'],
						}
					],
					// 对email字段进行必填验证
					password: [{
							required: true,
							message: '请输入密码',
							trigger: ['blur', 'change'],
						},
						{
							pattern: /^[a-zA-Z]\w{5,17}$/,
							message: '字母开头,长度6-18之间,允许字母数字和下划线！',
							transform(value) {
								return String(value);
							},
							trigger: ['blur', 'change'],
						}
					],
					repassword: [{
							required: true,
							message: '请输入密码',
							trigger: ['blur', 'change'],
						},
						{
							pattern: /^[a-zA-Z]\w{5,17}$/,
							message: '字母开头,长度6-18之间,允许字母数字和下划线！',
							transform(value) {
								return String(value);
							},
							trigger: ['blur', 'change'],
						},
						{
							validator: (rule, value, callback) => {
								if (value === "") {
									return callback(new Error("请输入确认密码"));
								}
								if (this.formData.password != "" && value === this.formData.password) {
									return callback();
								} else {
									return callback(new Error("两次输入的密码不一致"));
								}
							},
							message: '两次密码不一致，请重新确认',
							trigger: ['blur', 'change'],

						},
					]

				}

			}
		},
		methods: {
			submit() {
				let flag = this.$checkrules.checkRules(this.formData, this.rules)
				console.log(flag)
				if (flag) {
					if (this.formData.repassword != "" && this.formData.repassword === this.formData.password){
						this.$request
						.post("/users/register", {
							userName: this.formData.phone,
							password: this.formData.password
						})
						.then(res => {
							console.log(res)
							//“001”代表登录成功，其他的均为失败
							if (res.data.code === "001") {
								// 弹出通知框提示登录成功信息
								uni.showToast({
									title: res.data.msg,
									duration: 1000
								});
								var timer = setTimeout(function() {
									clearTimeout(timer)
									uni.redirectTo({
										url: "/subpages/login_register/index"
									})
								}, 1500)
							} else {
								// 清空输入框的校验状态
								this.$nextTick(function() {
									this.$refs.form.resetFields();
								});
								// 弹出通知框提示登录失败信息
								uni.showToast({
									title: res.data.msg,
									duration: 1000
								});
							}
						})
						.catch(err => {
							return Promise.reject(err);
						});
					}else{
						uni.showToast({
							title: "两次密码不一致，请重新确认密码",
							duration: 1000
						});
					}
				} else {
					uni.showToast({
						title: "注册失败",
						duration: 1000
					});
				}

			},
			toLogin() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style scoped>
	.login {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #ffdab9;
		display: flex;
		flex-direction: column;
	}
	.avatorWrapper {
		width: 100%;
		height: 400rpx;
		background-color: #ffa181;
		position: relative;
		top: 0;
	}

	.img {
		position: absolute;
		top: 150rpx;
		left: 50%;
		transform: translateX(-50%);
		margin: 40rpx auto;
		width: 375rpx;
		height: 375rpx;
		background-color: peachpuff;
		border-radius: 150rpx;
	}
	
	.formStyle{
		position: relative;
		top: 10%;
		padding: 20rpx;
		height: 25%;
	/* 	overflow: hidden; */
			}
	.inputWrapper{
		display:flex;
/* 		height: 100rpx; */
		/* #ifndef MP-WEIXIN */
		overflow: hidden;
		/* #endif */

		background-color: #ffffff;
		border-radius: 20px;
		box-sizing: border-box;
		padding: 0 40rpx;
		margin-top: 4%;
		
	}
	/deep/.u-form-item__body__right__message[data-v-5e7216f1] span {
		position: absolute;
		right: 3%;
		/* margin-left: -18%; */
		margin-top: 0rpx;
		width: 93%;
		height: 7%;
		text-align: center;
		font-size: 7% !important;
		background: rgba(255, 255, 255, 0.2);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
		border-radius: 25px;
		box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.2);
	}

	.uni-input-placeholder {
		font-size: 3%;
	}
.btnStyle{
	position: absolute;
	width: 100%;
	margin-left:3% ;
	/* left: 9%; */
	bottom: 5%;
	display: flex;
}
	.Btn {
		width: 35%;
		height: 10%;
		background: #77B307;
		border-radius: 50rpx;
/* 		margin-top: 50rpx; */
		margin-left: 3%;
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: 10rpx 10rpx #80c342;

	}


	.register {
		background: #eb8a31;
		box-shadow: 10rpx 10rpx #f5bd00;
	}
</style>
